<script setup>
import fail from '../assets/fail.png'
defineProps({
  src: String,
  objectFit: {
    type: String,
    default: 'cover',
  },
  hover: {
    type: Boolean,
    default: false,
  },
})

const handleImageError = (e) => {
  e.target.src = fail
}
</script>

<template>
  <div v-bind="$attrs" class="overflow-hidden">
    <img :class="hover ? 'imgH' : ''" style="transition: all 0.5s;" :src="src" v-bind="$attrs" :style="{ 'object-fit': objectFit }" @error="handleImageError">
  </div>
</template>

<style scoped>
    .overflow-hidden .imgH:hover{
        transform: scale(1.2);
    }
</style>
